<template>
  <div class="home">
    <table class="table table-bordered table-hover">
      <thead>
        <tr class="success">
          <th>书籍</th>
          <th>作者</th>
          <th>状态</th>
          <th>豆瓣评分</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in searchName" :key="index">
          <router-link tag="td" :to="'/detail/' + index">{{item.bookName}}</router-link>
          <td>{{item.author}}</td>
          <td>{{item.status}}</td>
          <td>{{item.star}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {},

  computed: {
    searchName() {
      return this.list.filter(
        item => item.bookName.indexOf(this.$store.state.str.trim()) >= 0
      );
    }
  },

  created() {
    this.$http
      .get("static/home.json")
      .then(({ data }) => (this.list = data))
      .catch(function(error) {
        console.log(error);
      });
  }
};
</script>

<style>
.home {
  height: 668px;
}
td {
  cursor: pointer;
}
</style>
